<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES9 扩展运算符与rest参数 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES9 扩展运算符与rest参数
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/10/23 16:05 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES7-11</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<p><code>rest</code>参数与<code>spread</code>扩展运算符在<code>ES6</code>中已经引入，不过<code>ES6</code>中只针对于数组，在<code>ES9</code>中为对象提供了像数组一样的<code>rest</code>参数和扩展运算符</p>
<h2><a id="%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>扩展运算符</h2>
<p>可用作对象的合并</p>
<pre class="line-numbers"><code class="language-js">const skillAll = {
    q: '天音破',
    w: '金钟罩',
    e: '天雷破',
    r: '神龙摆尾',
}
console.log(skillAll);
//输出：{q: &quot;天音破&quot;, w: &quot;金钟罩&quot;, e: &quot;天雷破&quot;, r: &quot;神龙摆尾&quot;}
</code></pre>
<p>等同于</p>
<pre class="line-numbers"><code class="language-js">const skillOne = {
    q: '天音破'
}
const skillTwo = {
    w: '金钟罩'
}
const skillThree = {
    e: '天雷破'
}
const skillFour = {
    r: '神龙摆尾'
}

console.log(skillOne, skillTwo, skillThree, skillFour);
/* 输出：
    {q: &quot;天音破&quot;}
    {w: &quot;金钟罩&quot;}
    {e: &quot;天雷破&quot;}
    {r: &quot;神龙摆尾&quot;} */

console.log({...skillOne, ...skillTwo, ...skillThree,...skillFour});
//输出：{q: &quot;天音破&quot;, w: &quot;金钟罩&quot;, e: &quot;天雷破&quot;, r: &quot;神龙摆尾&quot;}
</code></pre>
<h2><a id="rest%E5%8F%82%E6%95%B0" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>rest参数</h2>
<pre class="line-numbers"><code class="language-js">function connect({ host, port, ...user }) {
    console.log(host);
    console.log(port);
    console.log(user);
}

connect({
    host: 'localhost',
    port: 3306,
    username: 'root',
    password: 'admin',
})

/* 输出：
        localhost
        3306
        { username: &quot;root&quot;, password: &quot;admin&quot; } */
</code></pre>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>